/**
 * guanf add
 * 2022-11-02
 * 跳转到新增用户界面
 */
//引入axios
import axios from 'axios';
import React from 'react';
import {useNavigate } from 'react-router-dom'

//创建函数式方法
function AddUser() {
    //定义路由变量
    const navigate = useNavigate();

    //提交方法
   const addUserSubmit = event =>{
       //取消事件的默认动作
       event.preventDefault();
       //生命头文件
       let config = {headers:{'Content-Type':'multipart-/form-data'},withCredentials:true}
       //进行后台请求
       axios({
           method:'post',
           url:'http://localhost/mall-basic-service/basic/user/addUser',
           params:{
               username:event.target.username.value,
               password:event.target.password.value,
               nickname:event.target.nickname.value,
               type:event.target.type.value,
               phone:event.target.phone.value,
           }
       },config).then((response)=>{
           //判断如果成功跳转到登录界面
           const code = response.data.code
           if(code === 200){
                navigate('/login')
           }
       }).catch(function (error) {
            //处理异常数据
       })
   }

    return (
        <div className="bodyDiv">
            <h4>新增用户</h4>
            <form onSubmit={addUserSubmit}>
                <label>
                    用户名称:&emsp;
                    <input className="form-control" type="text" id="username" name ="username"/></label><br/>
                <label>
                    登录密码:&emsp;
                    <input className="form-control" type="password" id="password" name ="password"/></label><br/>
                <label>
                    昵称:&emsp;
                    <input className="form-control" type="text" id="nickname" name ="nickname"/></label><br/>
                <label>
                    用户角色:&emsp;
                    <input  type="radio" name="type" id="type" value="1" checked="true"/>采购人 &emsp;
                    <input type="radio" name="type" id="type" value="2"/>供应者 &emsp;
                    <input type="radio" name="type" id="type" value="3"/>管理员 &emsp;
                </label><br/>
                <label>
                    手机号码:&emsp;
                    <input className="form-control" type="text" name="phone" id="phone"/>
                </label>
                <br/>
                <label>
                    <button className="btn btn-primary" type="submit">提交</button> &emsp;
                    <button className="btn btn-primary" type="reset">重置</button>
                </label>
            </form>
        </div>
    );
}

export default AddUser;